<template>
  <el-main>
    <!--      面包屑        -->
    <el-card class="box-card">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
        <el-breadcrumb-item
          ><a href="/">promotion management</a></el-breadcrumb-item
        >
        <el-breadcrumb-item>promotion list</el-breadcrumb-item>
        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <!--        列表功能      -->
    <el-card class="box-card">
      <el-row class="mb-4">
        <el-button>全选</el-button>
        <el-button type="success"
          ><el-icon><Document /></el-icon>导出</el-button
        >
        <el-button type="warning"
          ><el-icon><Switch /></el-icon>转交</el-button
        >
        <el-button type="info"
          ><el-icon><Printer /></el-icon>打印</el-button
        >
        <el-button type="danger"
          ><el-icon><Delete /></el-icon>删除</el-button
        >
        <el-badge :value="3" class="item" style="margin-left: 10px">
          <el-button
            ><el-icon><School /></el-icon>今日回访aaaa</el-button
          >
        </el-badge>
      </el-row>
    </el-card>
    <!--       搜索       -->
    <tableSearch :filedTypeList="filedTypeList"></tableSearch>
    <!--      列表        -->
    <tableList
      :total="total"
      :pagesize="pagesize"
      :tableData="tableListData"
      :tableField="tableField"
      :isSelectMult="true"
    ></tableList>
    <!--              //分页-->

    <!-- 更改弹窗状态 start -->
    <el-dialog v-model="dialogVisible" title="修改状态" width="30%">
      <span>是否修改客户到院状态？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 更改状态弹窗 end -->
  </el-main>
  <!-- 预约到院编辑页面 start -->
  <el-dialog v-model="dialogFormVisible" title="编辑" width="500">
    <el-form :model="form">
      <el-form-item label="是否成交" :label-width="formLabelWidth">
        <el-select v-model="form.is_deal">
          <el-option label="成交" value="shanghai" />
          <el-option label="定金" value="beijing" />
          <el-option label="未成交" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="定金" :label-width="formLabelWidth">
        <el-input v-model="form.earnest" autocomplete="off" />
      </el-form-item>
      <el-form-item label="成交金额" :label-width="formLabelWidth">
        <el-input v-model="form.trading_volume" autocomplete="off" />
      </el-form-item>
      <el-form-item label="实际到院日期" :label-width="formLabelWidth">
        <el-date-picker
          v-model="form.to_date"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 预约到院编辑页面 end -->
</template>

<script lang="ts" setup>
import { reactive, ref, onBeforeMount } from "vue";
import { Document } from "@element-plus/icons-vue";
import { useStore } from "vuex";
import tableList from "../../../common/pages/table.vue";
import tableSearch from "../../../common/pages/tableSearch.vue";
import { getCustomerInfoList } from "../../../request/api";
//-------预约页面独立部分js   start -----//
//更改状态
const dialogVisible = ref(false);

//预约表单
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const form = reactive({
  is_deal: "",
  trading_volume: "3,600.00", //成交金额
  earnest: "500.00", //定金
  to_date: "", //到院日期
});
//-------预约页面独立部分js   end -----//

//预约搜索字段
const filedTypeList = ref([
  {
    field: "name",
    label: "姓名",
    type: "text",
    placeholder: "请输入客户名称",
  },
  {
    field: "phone",
    label: "手机号",
    type: "text",
    placeholder: "请输入手机尾号",
  },
  {
    field: "number",
    label: "客户编号",
    type: "text",
    placeholder: "请输入客户编号",
  },
  {
    field: "user",
    label: "跟进人",
    type: "text",
    placeholder: "请输入跟进人",
  },
  {
    field: "status",
    label: "是否有效",
    type: "select",
    placeholder: "请选择状态",
    option: [
      {
        label: "有效",
        value: "shanghai", //选择的真正值
      },
      {
        label: "无效",
        value: "beijing",
      },
    ],
  },
  {
    field: "is_hospital",
    label: "是否进院",
    type: "select",
    placeholder: "请选择进院状态",
    option: [
      {
        label: "已进院",
        value: "shanghai", //选择的真正值
      },
      {
        label: "未进院",
        value: "beijing",
      },
    ],
  },
  {
    field: "is_deal",
    label: "是否成交",
    type: "select",
    placeholder: "请选择成交状态",
    option: [
      {
        label: "已成交",
        value: "shanghai", //选择的真正值
      },
      {
        label: "未成交",
        value: "beijing",
      },
    ],
  },
  {
    field: "source",
    label: "来源渠道",
    type: "select",
    placeholder: "请选择来源渠道",
    option: [
      {
        label: "微信",
        value: "shanghai", //选择的真正值
      },
      {
        label: "转介绍",
        value: "beijing",
      },
    ],
  },
  {
    field: "source_type",
    label: "资源类型",
    type: "select",
    placeholder: "请选择资源类型",
    option: [
      {
        label: "类型1",
        value: "shanghai", //选择的真正值
      },
      {
        label: "类型2",
        value: "beijing",
      },
    ],
  },
  {
    field: "consult_type",
    label: "咨询类型",
    type: "select",
    placeholder: "请选择咨询类型",
    option: [
      {
        label: "类型1",
        value: "shanghai", //选择的真正值
      },
      {
        label: "类型2",
        value: "beijing",
      },
    ],
  },
  {
    field: "hospital_id",
    label: "请选择医院",
    type: "select",
    placeholder: "请选择咨询类型",
    option: [
      {
        label: "西安医院",
        value: "shanghai", //选择的真正值
      },
      {
        label: "上海医院",
        value: "beijing",
      },
    ],
  },
]);

const total = ref(100); //数据总数
const pagesize = ref(10); //单页数据数量
//列表字段
const tableField = reactive([
  {
    field: "number",
    label: "客户编号",
    width: "150",
    fixed: "",
  },
  {
    field: "name",
    label: "姓名",
    width: "100",
    fixed: "",
  },
  {
    field: "phone",
    label: "手机号",
    width: "110",
  },
  {
    field: "level",
    label: "客户级别",
    width: "110",
  },
  {
    field: "source",
    label: "来源渠道",
    width: "110",
  },
  {
    field: "source_type",
    label: "资源类型",
    width: "110",
  },
  {
    field: "consult_type",
    label: "咨询类型",
    width: "110",
  },
  {
    field: "hospital_id",
    label: "意向医院",
    width: "110",
  },
  {
    field: "is_hospital",
    label: "是否进院",
    width: "90",
    type: "tag",
    options: ["已进院", "未进院"],
  },
  {
    field: "is_deal",
    label: "是否成交",
    width: "90",
    type: "tag",
    options: ["已成交", "未成交"],
  },
  {
    field: "status",
    label: "是否进院",
    width: "90",
    type: "tag",
    options: ["有效", "无效"],
  },
  {
    field: "trading_volume",
    label: "成交金额",
    width: "120",
  },
  {
    field: "user",
    label: "跟进人",
    width: "100",
  },
  {
    field: "opera",
    label: "操作",
    fixed: "right",
    width: "370",
    type: "opera",
    opera: [
      {
        type: "button",
        text: "回访",
        color: "",
        icon: "ChatDotRound",
      },
      {
        type: "edit",
        text: "编辑",
        calc: (row, column, $index) => {
          console.log(row, column, $index);
          form.is_deal = "";
          form.trading_volume = "";
          form.earnest = "";
          form.to_date = "";
          dialogFormVisible.value = true;
        },
      },
      {
        type: "status",
        text: "处理",
      },
      {
        type: "delete",
        text: "删除",
      },
    ],
  },
]);
//列表数据
const tableListData = reactive([
  {
    booking_date: "2016-05-03 16:16", //预约日期
    number: "KPT202303304619", //客户编号
    name: "张xx", //姓名
    phone: "185****1491", //手机号
    source: "微信", //客户来源
    user: "张xx", //跟进人
    status: 1, //状态
    to_date: "2016-05-03 16:16", //实际到院日期
    is_deal: 1, //是否成交
    trading_volume: "3,600.00", //成交金额
    earnest: "500.00", //定金
  },
]);

onBeforeMount(() => {
  const params = {
    id: "1",
    name: "",
    create_time: "2023-04-11",
    page: 1,
    limit: 10,
  };
  getCustomerInfoList(params).then((res) => {
    console.log(res);
    if (res.code == 200) {
      // total.value = res.data.total;
      pagesize.value = res.data.total_page;
      tableListData.value = res.data.list.concat(
        JSON.parse(JSON.stringify(res.data.list))
      );
      total.value = tableListData.value.length;
      for (let key in res.data.column_name) {
        let obj = { label: "", field: "" };
        console.log(key);
        obj.field = key;
        obj.label = res.data.column_name[key];
        tableField.value.push(obj);
      }
      const oper = {
        label: "操作",
        field: "opera",
        opera: [
          {
            type: "success",
            text: "编辑",
            calc: (row, column, $index) => {
              console.log(row, column, $index);
              form.is_deal = "";
              form.trading_volume = "";
              form.earnest = "";
              form.to_date = "";
              dialogFormVisible.value = true;
            },
          },
          {
            type: "danger",
            text: "删除",
            calc: (row, column, $index) => {
              console.log(row, column, $index);
              dialogVisible.value = true;
            },
          },
        ],
      };
      tableField.value.push(oper);
    }
  });
});
</script>

<style scoped></style>
